<template>
    <div class="signal-container">
        <div
            v-for="(item, index) in filterSignals"
            :key="index"
            class="signal-item">
            <div class="signal-name">{{item.name}}</div>
            <div class="signal-value">{{item.value}}{{item.unit}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "SignalPanel",
    computed: {
        signals() {
            return this.$store.state.signals
        },
        lastSignals() {
            return this.$store.getters.last.filter(v => v.key !== "nowmileage" && v.key !== "nowspeed" && v.key !== "nowgentime")
        },
        filterSignals() {
            return this.lastSignals.map(v => {
                const signal = this.signals.find(k => k.column === v.key)
                return {
                    ...v,
                    name: signal ? signal.name : v.key,
                    unit: signal ? signal.unit : ""
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.signal-container{
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  box-sizing: border-box;
  border-top: 1px solid #ebebeb;
  .signal-item{
    display: flex;
    justify-content: space-around;
    margin-bottom: 12px;
    align-items: center;
    .signal-name{
      flex-shrink: 0;
      overflow-wrap: break-word;
      width: calc(100% - 50px - 24px);
      color: rgba(0,0,0,.45);
      font-size: 14px;
    }
    .signal-value{
      color: rgba(0,0,0,.85);
      font-size: 24px;
      width: 50px;
      text-align: right;
    }
  }
}
.dark-mode{
  .signal-container{
    border-top: 1px solid #4C4D4F;
    .signal-item{
      .signal-name{
        color: rgba(255,255,255,.45);
      }
      .signal-value{
        color: rgba(255,255,255,.85);
      }
    }
  }
}
</style>
